<template>
	<view class="container" style="overflow: scroll;margin-bottom: 100rpx;">
		
		<view class="tui-list-view-center">
			<bolck v-if="goodsDetails.length > 0" v-else v-for="(item, index) in goodsDetails" :key="index">
				<view class="list_networkList">
					<view class="list_left" @click="information(item.card_id,item.cardholder,item.card_no)">
						<image v-if="bankcard_id == item.card_id" style="width: 50rpx;height: 45rpx;margin-top: 75rpx;" src="../../static/my/icon/check.png"></image>
					</view>
					<view class="list_details" @click="information(item.card_id,item.cardholder,item.card_no)">
						<view class="list_tops">
							<view class="name_networkList">{{item.cardholder.substr(0,0)+'*'+item.cardholder.substr(1,item.cardholder.split('').length)}}</view>
						</view>
						<view class="list_bottom">
							<view class="address_networkList">{{tx_bankcard(item.card_no)}}</view>
						</view>
					</view>
					<view class="list_right" @click="delete_bankcard(item.card_id)">
						<view class="menuImgPadding">
							<image src="../../static/my/icon/delete.png" class="menuImg"></image>
						</view>
					</view>
				</view>
			</bolck>
			<view class="matter" @click="details('./bankcard')">
				<view class="photograph">
					<image src="../../static/my/icon/append.png"></image>
				</view>
				<view style="width: 75%;float: left;">
					新增银行卡
				</view>
				<view class="clickimage">
					<image src="../../static/my/Combined Shape.png"></image>
				</view>
			</view>
		</view>
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		
		<!-- <tui-modal :show="modalBack" @click="confirmBack" @cancel="hideBack" title="确认要退出当前页面吗？" content="退出后编辑内容不会保存"></tui-modal> -->
		<!--toast提示-->
		
	</view>
</template>

<script>
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiActionsheet,
			tuiToast,
			tuiTips
		},
		data() {
			return {
				showActionSheet: false,
				maskClosable: true,
				goodsDetails: [],
				bankcard_id: '',
			}
		},
		onLoad: function(option) {
			
			this.loadDate();
		},
		onShow: function() {
			this.loadDate();
			this.element = getApp().globalData.goodsDetails;
			if(uni.getStorageSync('bankcard')){
				this.bankcard_id = uni.getStorageSync('bankcard').card_id;
				console.log('有值',this.bankcard_id);
			}
		},
		methods: {
			tx_bankcard: function(e){
				if(e){
					var sun = e.split('').length - 8;
					if(sun == 4){
						var asterisk = '****';
					}else if(sun == 5){
						var asterisk = '*****';
					}else if(sun == 6){
						var asterisk = '******';
					}else if(sun == 7){
						var asterisk = '*******';
					}else if(sun == 8){
						var asterisk = '********';
					}else if(sun == 9){
						var asterisk = '*********';
					}else if(sun == 10){
						var asterisk = '**********';
					}else if(sun == 11){
						var asterisk = '***********';
					}else if(sun == 12){
						var asterisk = '************';
					}
					
					return e.substr(0,4)+' '+ asterisk +e.substr(e.split('').length - 4,e.split('').length);
				}else{
					return false;
				}
			},
			delete_bankcard: function(card_id){
				let that = this;
				wx.showModal({
					title: '确认要删除有银行卡吗？',
					content: '银行卡删除后无法恢复，请谨慎操作',
					success(res) {
						if (res.confirm) {
							console.log('用户点确定了');
							that.tui.request('user/cardEditStatus', {
								card_id:card_id,
							}).then((res) => {
								if(res.code == '0000'){
									if(card_id == that.bankcard_id){
										var bankcard = false;
										wx.setStorage({
										   key: 'bankcard',
										   data: bankcard
										});
									}
									that.loadDate();
									let params = {
										title: "删除成功",
										imgUrl: "/static/toast/fail-circle.png",
										icon: true
									};
									that.$refs.toast.show(params);
								}else{
									let params = {
										title: "删除失败",
										imgUrl: "/static/toast/fail-circle.png",
										icon: true
									};
									that.$refs.toast.show(params);
								}
							}).catch((err) => {
								that.reimburse = false;
								let params = {
									title: "服务器异常",
									imgUrl: "/static/toast/fail-circle.png",
									icon: true
								};
								that.$refs.toast.show(params);
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			loadDate: function() {
				this.tui.request('user/cardList',{
					
				}).then((res) => {
					console.log(res);
					this.goodsDetails = res.data;
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			details: function(url, type) {
				if (!url) {
					return false
				}
				if (type == 1) {
					uni.switchTab({
						url: url
					});
					return false
				}
				uni.navigateTo({
					url: url,
				});
			},
			information: function(card_id,cardholder,card_no){
				//缓存银行卡信息
				var bankcard = {
					card_id:card_id,
					cardholder:cardholder,
					card_no:card_no,
				}
				wx.setStorage({
				   key: 'bankcard',
				   data: bankcard
				});
				
				wx.navigateBack({
				  delta: 1,
				})
			},
		},
	}
</script>

<style>
	/* 新增银行卡 */
	.matter{
		width: 100%;
		background: #FFF;
		height: 100rpx;
		line-height: 100rpx;
	}
	.photograph{
		width: 15%;
		float: left;
	}
	.photograph image{
		width: 40rpx;
		height: 40rpx;
		margin-left: 50rpx;
		/* margin-top: 30rpx; */
		float: left;
		margin-top: 30rpx;
	}
	.clickimage{
		width: 5%;
		float: left;
		text-align: center;
	}
	.clickimage image{
		width: 20rpx;
		height: 30rpx;
	}
	
	
	
	/* 自提点 */
	.bottom_ztd{
		width: 200rpx;
		float: right;
		margin-bottom: 0rpx !important;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.top_ztd{
		padding: 20rpx;
		height: 75rpx;
	}
	/* 自提点 */
	
	.tui-input{
		/* z-index: -1; */
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-view-top {
		padding-top: 20upx !important
	}
	.tui-list-view-top  .tui-list-cell-name{
		padding-left: 0rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #8f8f8f !important;
	}
	.tui-list-title {
		font-size: 30rpx;
		font-weight: 450;
		color: #000000 !important; 
	}
	
	.tui-list-view-top .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #000;
	}
	.tui-list-add .tui-right{
		color: #0A8FE2 !important;
	}
	.tui-list-cell-name-extracting{
		min-width: 135rpx !important; 
	}
	.tui-list-cell-name {
		/* padding-left: 20upx; */
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #999;
	}



	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-msg::after {
		left: 154upx !important
	}
	.footMar{
		margin-top: 10rpx;
		/* padding-bottom: 280rpx; */
	}
	.footMar .tui-list-cell{
		background: #f5f6f8 !important;
	}
	.tui-list-cell-name{
		font-size: 30rpx;
		font-weight: 400;
	}
	
	.footMar .tui-list-cell::after{
		border-bottom: none
	}
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		padding-bottom: 50px;
		box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px;
	}
	
	.tui-light-green{
		background-color: #FFF !important;
	}
	
	/* 自提点信息 */
	.menuImgPadding{
		width: 50rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 50%;
		/* padding: 15rpx; */
		margin-top: 15rpx;
	}
	.menuImg{
		width: 100%;
		height: 100%;
	}
	.tui-btn-box {
		width: 100%;	
		padding: 40rpx 50rpx;
		box-sizing: border-box;
		/* background: #FFFFFF; */
		padding-bottom: 50px;
		/* box-shadow: 0px 0px 15px rgba(0,0,0,0.1); */
		position: fixed;
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px;
	}
	/* tuiTips */
	.tuiTips{
		margin-top: 30% ;
	}
	.tui-tips-content{
		font-size: 30rpx !important; 
		color: #cccccc !important;
	}
	/* tuiTips */
	
	/* 滑动事件 */
	.container {
		padding-bottom: 120rpx;
	}
	
	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
	
	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}
	
	.tui-list-item {
		padding: 40rpx 30rpx;
		display: flex;
		align-items: item;
	}
	
	.tui-title {
		width: 100%;
		padding: 50rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-switch {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	
	.tui-custom-btn_box {
		width: 140px;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
	}
	
	.tui-custom-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.tui-custom-mr {
		margin-right: 20rpx;
	}
	/* 滑动事件 */
	
	.list_networkList{
		width: 100%;
		border-bottom: 1rpx solid #CFCFCF;
		height: 170rpx;
		background: #FFF;
	}
	.list_left{
		width: 15%;
		height: 100%;
		/* line-height: 105rpx; */
		text-align: center;
		float: left;
	}
	.list_details{
		width: 70%;
		float: left;
		height: 170rpx;
		font-size: 25rpx;
	}
	.list_right{
		width: 10%;
		float: left;
		height: 170rpx;
		line-height: 170rpx;
	}
	.list_tops{
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 24rpx;
	}
	.list_bottom{
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #666;
	}
	.name_networkList{
		float: left;
		width: 235rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 36rpx;
		font-weight: 500;

	}
	.phone_networkList{
		float: left;
		width: 210rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title_networkList{
		float: left;
		width: 125rpx;
		/* text-align: center; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.address_networkList{
		float: left;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
